<template>
  <div class="home-summary">
    <div class="home-summary-title">
      当日概况
    </div>
    <div class="home-summary-list">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="home-summary-cell"
      >
        <div class="home-summary-box">
          <img class="home-summary-image" :src="imgMap[item.name]" alt="">
        </div>
        <div class="home-summary-right">
          <div class="home-summary-value">{{ item.value }}</div>
          <div class="home-summary-dic">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getToday } from '../api'

import img1 from '../images/1.png'
import img2 from '../images/2.png'
import img3 from '../images/3.png'
import img4 from '../images/4.png'
import img5 from '../images/5.png'
import img6 from '../images/6.png'

const imgMap = {
  '日销售总额': img1,
  '日平均接待量': img2,
  '日平均转化率': img3,
  '日平均答问比': img4,
  '日平均回复率': img5,
  '日平均响应时间': img6
}

const list = ref([])
getToday({ date: dayjs().format('YYYY-MM-DD') })
  .then(res => {
    list.value = res || []
  })
</script>

<style scoped lang="scss">
.home-summary {
  height: 250px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 25px;
  box-sizing: border-box;
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
  }
  &-list {
    height: 170px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  &-cell {
    width: 33.33333%;
    display: flex;
    height: 52px;
  }
  &-box {
    height: 52px;
    margin-right: 14px;
  }
  &-image {
    height: 100%;
  }
  &-value {
    color: #333333;
    font-size: 28px;
  }
  &-dic {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 13px;
    color: #75848A;
    margin-top: 5px;
  }
}
</style>